{% extends "layout.html" %}

{% block slider %}
<div class="demo-1 black-canvas" style="z-index: 0">
	<div class="content">
		<div id="large-header" class="large-header">
			<canvas id="demo-canvas"></canvas>
			<h1></h1>
		</div>
	</div>
</div>
{% endblock slider %}


{% block main %}
<div class="container" style="z-index: 1; position: absolute; top: 0; left: 50%; transform: translate(-50%, -400px);">
	<h1 align="center" style="color: white;">Files</h1>

	<hr/>
	<br/>

	<div class="row">
		<div class="col-md-12">

			<!-- Table sorting and search functions -->
			<script type="text/javascript">
			jQuery( document ).ready( function( $ ) {
				var $table3 = jQuery("#files-table");
				
				var table3 = $table3.DataTable( {
					"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
				} );
				
				// Initalize Select Dropdown after DataTables is created
				$table3.closest( '.dataTables_wrapper' ).find( 'select' ).select2( {
					minimumResultsForSearch: -1
				});
				
				// Apply the search
				table3.columns().every( function () {
					var that = this;
				
					$( 'input', this.header() ).on( 'keyup change', function () {
						if ( that.search() !== this.value ) {
							that
								.search( this.value )
								.draw();
						}
					});
				});
			} );
			</script>

			<!-- Files table -->
			<table class="table table-bordered datatable" id="files-table" style="opacity: 1.0;">
				<thead>
					<tr class="replace-inputs"">
						<td class="text-center" style="color: black;"><input type="text" class="form-control" placeholder="Filename" /></td>
						<td class="text-center" style="color: black;"><input type="text" class="form-control" placeholder="Session" /></td>
						<td class="text-center" style="color: black;"><input type="text" class="form-control" placeholder="Module" /></td>
						<td class="text-center" style="color: black;"><input type="text" class="form-control" placeholder="Timestamp" /></td>
						<td class="text-center" style="color: black; vertical-align: middle; text-align: center; font-weight: bold;">Download</td>
					</tr>
				</thead>
				<tbody id="files-table-body">
					{% for f in files %}
					<tr style="background-color: white; color: grey;" id="file-row-{{ f['id'] }}">

						<!-- Filename -->
						<td style="text-align: center; vertical-align: middle;">{{ f.filename }}</td>

						<!-- Session ID -->
						<td style="text-align: center; vertical-align: middle;">{{ f.session }}</td>

						<!-- Module which created/uploaded this file -->
						<td style="text-align: center; vertical-align: middle;">{{ f.module }}</td>

						<!-- Timestamp -->
						<td style="text-align: center; vertical-align: middle;">{{ f.created }}</td>

						<!-- Download button -->
						<td class="text-center">
							<i class="entypo-download" name="{{ f.owner }}/files/{{ f.filename }}"" onclick="download(this)"></i>
						</td>
					</tr>
					{% endfor %}
				</tbody>

			</table>
		</div>
	</div>
</div>
	<!-- Imported styles on this page -->
	<link rel="stylesheet" href="/assets/js/datatables/datatables.css">
	<link rel="stylesheet" href="/assets/js/select2/select2-bootstrap.css">
	<link rel="stylesheet" href="/assets/js/select2/select2.css">
	<link rel="stylesheet" href="/assets/js/selectboxit/jquery.selectBoxIt.css">

	<!-- Bottom scripts (common) -->
	<script src="assets/js/gsap/TweenMax.min.js"></script>
	<script src="assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js"></script>
	<script src="assets/js/bootstrap.js"></script>
	<script src="assets/js/joinable.js"></script>
	<script src="assets/js/resizeable.js"></script>
	<script src="assets/js/neon-api.js"></script>
	<script src="/assets/js/selectboxit/jquery.selectBoxIt.min.js"></script>


	<!-- Imported scripts on this page -->
	<script src="assets/js/datatables/datatables.js"></script>
	<script src="assets/js/select2/select2.min.js"></script>
	<script src="assets/js/neon-chat.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="assets/js/neon-custom.js"></script>




	<!-- Imported styles on this page -->
	<link rel="stylesheet" href="/assets/js/select2/select2-bootstrap.css">
	<link rel="stylesheet" href="/assets/js/select2/select2.css">
	<link rel="stylesheet" href="/assets/js/selectboxit/jquery.selectBoxIt.css">
	<link rel="stylesheet" href="/assets/js/daterangepicker/daterangepicker-bs3.css">
	<link rel="stylesheet" href="/assets/js/icheck/skins/minimal/_all.css">
	<link rel="stylesheet" href="/assets/js/icheck/skins/square/_all.css">
	<link rel="stylesheet" href="/assets/js/icheck/skins/flat/_all.css">
	<link rel="stylesheet" href="/assets/js/icheck/skins/futurico/futurico.css">
	<link rel="stylesheet" href="/assets/js/icheck/skins/polaris/polaris.css">

	<!-- Bottom scripts (common) -->
	<script src="/assets/js/gsap/TweenMax.min.js"></script>
	<script src="/assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js"></script>
	<script src="/assets/js/bootstrap.js"></script>
	<script src="/assets/js/joinable.js"></script>
	<script src="/assets/js/resizeable.js"></script>
	<script src="/assets/js/neon-api.js"></script>


	<!-- Imported scripts on this page -->
	<script src="/assets/js/select2/select2.min.js"></script>
	<script src="/assets/js/bootstrap-tagsinput.min.js"></script>
	<script src="/assets/js/typeahead.min.js"></script>
	<script src="/assets/js/selectboxit/jquery.selectBoxIt.min.js"></script>
	<script src="/assets/js/bootstrap-datepicker.js"></script>
	<script src="/assets/js/bootstrap-timepicker.min.js"></script>
	<script src="/assets/js/bootstrap-colorpicker.min.js"></script>
	<script src="/assets/js/moment.min.js"></script>
	<script src="/assets/js/daterangepicker/daterangepicker.js"></script>
	<script src="/assets/js/jquery.multi-select.js"></script>
	<script src="/assets/js/icheck/icheck.min.js"></script>
	<script src="/assets/js/neon-chat.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="/assets/js/neon-custom.js"></script>


	<script>
		function download(element) {
			location.href = "output/"+element.getAttribute('name');
		}
	</script>

{% endblock %}